<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<div class="col-md-9">
    <div class="data_list">
        <div class="data_list_title"><span class="glyphicon glyphicon-signal"></span>&nbsp;数据报表 </div>
        <div class="container-fluid">
            <div class="row" style="padding-top: 20px;">
                <div class="col-md-12">
                    <%-- 柱状图的所需容器 --%>
                    <div id="monthChart" style="height: 600px"></div>

                    <%-- 百度地图的加载 --%>
                    <h3 align="center">用户地区分布图</h3>
                        <%-- 百度地图的容器 --%>
                    <div id="baiduMap" style="height: 600px;width: 100%"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<%--
    关于Echarts报表的使用
        1、下载Echarts的依赖 （JS文件）
        2、在需要使用的页面引入Echarts的JS文件
        3、为Echarts 准备一个具备宽高的DOM 容器
        4、通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个报表
--%>
<script type="text/javascript" src="statics/echarts/echarts.min.js"></script>
<%--应用百度地图API文件 需要申请百度地图对应的ak密钥--%>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=yrxymYTyuefnxNtXbZcMU8phABXtu6TG"></script>
<script type="text/javascript">

    /**
        通过月份查询对应的云记数量
     */
    $.ajax({
        type: "get",
        url: "report",
        data:{
            actionName: "month"
        },
        success:function (result) {
            console.log(result);
            if (result.code == 1){
                // 得到月份 （得到X轴的数据）
                var monthArray = result.result.monthArray;
                // 得到月份对应的云记数量 （得到Y轴的数据）
                var dataArray = result.result.dataArray;
                // 加载柱状图
                loadMonthCharts(monthArray,dataArray);
            }
        }
    });

    /**
     * 加载柱状图
     */
    function loadMonthCharts(monthArray,dataArray) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('monthChart'));

      // 指定图表的配置项和数据

      var option = {
          legend: {
              top: 'bottom'
          },
          toolbox: {
              show: true,
              feature: {
                  mark: { show: true },
                  dataView: { show: true, readOnly: false },
                  restore: { show: true },
                  saveAsImage: { show: true }
              }
          },
          series: [
              {
                  name: 'Nightingale Chart',
                  type: 'pie',
                  radius: [50, 250],
                  center: ['50%', '50%'],
                  roseType: 'area',
                  itemStyle: {
                      borderRadius: 8
                  },
                  data: [
                      { value: 40, name: 'java基础' },
                      { value: 38, name: '数据结构' },
                      { value: 32, name: '设计模式' },
                      { value: 30, name: 'SSM框架' },
                      { value: 28, name: '中间件' },
                      { value: 26, name: '微服务' },
                      { value: 22, name: '运维' },
                      { value: 15, name: '其它' }
                  ]
              }
          ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
  }

    /**
     * 通过用户发布的坐标查询云记
     */
    $.ajax({
        type: "get",
        url:"report",
        data:{
            actionName: "location"
        },
        success: function (result) {
            console.log(result)
            if (result.code == 1){
                // 加载百度地图
                loadBaiduMap(result.result);
            }
        }
    });

    /**
     * 加载百度地图
     */
    function loadBaiduMap(makers) {
        // 加载地图实例
        var map = new BMapGL.Map("baiduMap");
        //  设置地图的中心点（默认是北京天安门）
        var point = new BMapGL.Point(116.404, 39.915);
        // 地图初始化，BMapGL.Map.centerAndZoom()方法要求设置中心点坐标和地图级别
        map.centerAndZoom(point, 5);

        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
        map.addControl(scaleCtrl);
        var zoomCtrl = new BMapGL.ZoomControl();  // 添加比例尺控件
        map.addControl(zoomCtrl);

        // 判断是否有点标记
        if (makers != null && makers.length > 0){ // 集合中的第一个坐标是用户当前所在位置，其他的是云记记录中对应的经纬度
            // 将用户所在的位置设置为中心点
            map.centerAndZoom(new BMapGL.Point(makers[0].lon, makers[0].lat), 10);

            // 循环在地图上添加点标记
            for (var i = 1; i < makers.length; i++) {
                // 创建点标记
                var marker = new BMapGL.Marker(new BMapGL.Point(makers[i].lon, makers[i].lat));
                // 在地图上添加点标记
                map.addOverlay(marker);
            }
        }

        // 创建点标记
        /*var marker1 = new BMapGL.Marker(new BMapGL.Point(116.404, 39.925));
        var marker2 = new BMapGL.Marker(new BMapGL.Point(116.404, 39.915));
        var marker3 = new BMapGL.Marker(new BMapGL.Point(116.395, 39.935));
        var marker4 = new BMapGL.Marker(new BMapGL.Point(116.415, 39.931));*/

        // 在地图上添加点标记
        /*map.addOverlay(marker1);
        map.addOverlay(marker2);
        map.addOverlay(marker3);
        map.addOverlay(marker4);*/
    }
</script>